<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
            height: 50px;
            background-color: #f6f6f6;
            color: #80bd01;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li @click="tab('all')">全部</li>
            <li @click="tab('good')">精华</li>
            <li @click="tab('share')">分享</li>
            <li @click="tab('ask')">问答</li>
            <li @click="tab('job')">招聘</li>
        </ul>
        <router-view :key="$route.fullPath"></router-view>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <script src="../js/axios.min.js"></script>
    <script>
        const Index = {
            data() {
                return {
                    list: []
                }
            },
            template: `
                <ol>
                    <li @click="goDetail(item)" v-for="item in list" :key="item.id">{{item.title}}</li>
                </ol>
            `,
            created() {
                // 动态路由不会重新触发声明周期 页面不会重新创建
                // console.log(this.$route);
                axios.get('https://cnodejs.org/api/v1/topics?tab=' + this.$route.params.type).then(res => {
                    // console.log(res);
                    this.list = res.data.data
                })
            },

            methods: {
                goDetail(item) {
                    this.$router.push({
                        path: '/index/detail',
                        query: {
                            item: JSON.stringify(item)
                        }
                    })
                }
            }
        }

        const detail = {
            data() {
                return {
                    detail: {},
                    author: {}
                }
            },
            template: `
                <div>
                    <button @click="back">返回</button>
                    <div>{{author.loginname}}</div>
                    <div v-html="detail.content"></div>
                    </div>
            `,

            created() {
                var item = JSON.parse(this.$route.query.item) 
                // console.log(id);
                axios.get('https://cnodejs.org/api/v1/topic/' + item.id).then(res => {
                    // console.log(res);
                    this.detail = res.data.data
                    this.author = this.detail.author
                })
            },

            methods: {
                back() {
                    // this.$router.back()
                    // this.$router.go(-2)
                }
            }
        }
        const router = new VueRouter({
            routes: [
                {
                    path: '/:type',
                    component: Index
                },
                {
                    path: '/index/detail',
                    component: detail
                }
            ]
        })
        new Vue({
            el: '#app',
            router,

            methods: {
                tab(type) {
                    // this.$router.push({
                    //     path: '/' + type
                    // })
                    this.$router.replace({
                        path: '/' + type
                    })
                }

                
            }
        }) 
    </script>
</body>
</html>